<template>
  <div class="hotlist">
    <div class="flex ">
      <div v-for="i in data_list" :key="i.id" class="imgBox">
        <imgBox
          :msg="{
                  src:i.img,
                c:1,
                w:'350px',
                imgw:'350px', 
                imgh:'200px', 
                h:'290px',
                t1:i.price,
                t2:i.price+i.price*0.2,
                t3:i.title,
                t4:i.msg,
                url:'/hote/page?id='+i.id
                }"
        ></imgBox>
      </div>
    </div>
    <div style="    text-align: right;">

   
    <el-pagination
      :page-size="page_size"
      :total="total"
      :current-page="pageNum"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
    ></el-pagination>
  </div>
   </div>
</template>

<script>
import imgBox from "@/components/imgBox/imgBox";
export default {
  data() {
    return {
      imgdata: "",
      page_size: 20,
      total: 0,
      pageNum: 1,
      data_list: []
    };
  },
  components: {
    imgBox
  },
  created: function() {
    this.upPage(1);
  },
  methods: {
    handleCurrentChange(page) {
      this.upPage(page);
    },
    upPage(page) {
      var d = { page: page, size: this.page_size };
      this.$api.hotelAPI.get_hotel(d).then(res => {
        this.total = res.data.data.count;
        this.data_list = res.data.data.results;
      });
    }
  }
};
</script>

<style lang="scss">
.imgBox {
  margin: 5px;
}
.hotlist{
}
</style>